<template>
    <div class="shortplay">
        <van-tabs
            title-active-color="#ffb562"
            line-width="50px"
            line-height="4px"
            swipeable
        >
            <van-tab v-for="item in playlist" :key="item.id" :title="item.name">
                <div class="input_video">
                    <div class="playvideo" @click="onplay(item.id)" v-show="showplay">
                        <van-icon
                            name="play-circle-o"
                            size="50px"
                            color="#fff"
                        />
                    </div>
                    <div class="information">{{ item.information }}</div>
                    <div>
                        <video
                            width="100%"
                            height="100%"
                            :src="item.video"
                            preload="auto"
                            controls
                        ></video>
                    </div>
                    <div class="introduce">
                        <span
                            ><van-field
                                v-model="sms"
                                center
                                clearable
                                placeholder="请输入评论"
                            >
                                <template #button>
                                    <van-button size="small" type="primary" color="#ffb562"
                                    @click="iptbtn"
                                        >发送评论</van-button
                                    >
                                </template>
                            </van-field></span
                        >
                        <span class="echart">
                            <van-icon
                                name="like-o"
                                size="25px"
                                :class="{ icon: item.isLike }"
                                @click="item.isLike = !item.isLike"
                                style="padding-left:5px"
                            />
                            <van-icon
                                name="good-job-o"
                                size="25px"
                                style="padding-left:5px"
                                :class="{ icon: item.Like }"
                                @click="item.Like = !item.Like"
                            />
                            <van-icon
                                name="star-o"
                                size="25px"
                                style="padding-left:5px"
                            />
                            <van-popover
                                v-model="showPopover"
                                trigger="click"
                                :actions="actions"
                                @select="onSelect"
                                placement="bottom-end"
                            >
                                <template #reference>
                                    <van-icon
                                        name="share-o"
                                        size="25px"
                                    />
                                </template>
                            </van-popover>
                        </span>
                    </div>
                </div>
            </van-tab>
            <div slot="nav-right" class="search"
                        @click="$router.push('/search')"
            >
                <van-icon name="search" size="0.5rem" class="search" to='/episode' />
            </div>
        </van-tabs>
        <short-video />
    </div>
</template>

<script>
import ShortVideo from './ShortVideo.vue';
import { Toast } from 'vant';
export default {
    name: 'Shortplay',
    data() {
        return {
            sms: '',
            playlist: [
                {
                    name: '推荐',
                    id: 1,
                    information: '人与自然',
                    video: 'http://vjs.zencdn.net/v/oceans.mp4',
                    origin: '周瀛有情演出',
                    image: require('../../assets/ying/20191030113326918.gif'),
                    isLike: false,
                    Like: false
                }
            ],
            showplay: true,
            red: null,
            sum: 1,
            showPopover: false,
            // 通过 actions 属性来定义菜单选项
            actions: [{ text: 'QQ' }, { text: '微信' }, { text: '微博' }]
        };
    },
    components: {
        ShortVideo
    },
    created() {
    },
    mounted() {
    },

    methods: {
        getplaylist(data) {
            this.playlist.push(...data);
        },
        onplay() {
            var videoplay = document.querySelector('video');
            videoplay.play();
            this.showplay = false
        },
        onSelect(action) {
            Toast(action.text);
        },
        iptbtn() {
            if (this.sms.length === 0) {
                Toast('请输入内容')
            } else {
                Toast('评论成功')
                this.sms = ''
            }
        }
    }
};
</script>

<style scoped lang="scss">
.echart {
    position: relative;
}
.shortplay {
    .van-list {
        width: 375px;
        height: 100%;
        font-size: 100px;
    }
    .input_video {
        position: relative;
        height: 90vh;
        overflow-y: auto;
        .playvideo {
            position: absolute;
            top: 30%;
            left: 43%;
            z-index: 2;
        }
    }
    /deep/ .van-tabs__wrap {
        position: fixed;
        top: 0;
        left: 0;
        height: 85px;
        width: 100%;
        z-index: 3;
    }
    /deep/ .van-tab {
        height: 100px;
        font-weight:700 ;
        font-size: 0.27rem;
        line-height: 1.2rem;
        margin-right: 0.8rem;
        text-shadow: 1px 1px #c7c3c3c9;
        /deep/ .van-tab__text {
            border: none;
            height: 0.2rem;
        }
    }
    /deep/ .van-tabs__line {
        background-color: #ffb562;
    }
    .van-tab__pane {
        padding-top: 0.8rem;
    }
    .search {
        z-index: 2;
        position: fixed;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 66px;
        height: 85px;
        background-color: #fff;
        opacity: 0.902;
    }
    .input_video {
        position: relative;
        width: 750px;
        height: 100%;
        border-top: 5px solid #d2d2d2;
        margin: 0 auto;
        .information {
            position: absolute;
            top: 3px;
            left: 10px;
            z-index: 3333;
            color: #fff;
            font-size: 30px;
        }
        .introduce {
            display: flex;
            justify-content: space-between;
            border-bottom: 5px solid #d2d2d2;
            span {
                font-size: 10px;
                line-height: 60px;
                padding-left:10px ;
                .van-cell{
                     border-radius: 10px;
                      box-shadow: 4px 4px 4px 4px #c7c3c3c9;
                     .van-button{
                          border-radius: 10px;
                          box-shadow: 2px 2px 2px 2px #c7c3c3c9;
                     }
                }
            }
        }
    }
}
.icon {
    color: red;
}
</style>
